<template>
	<div class="card">
		<slot></slot>
	</div>
</template>

<script>
	export default {
		
	}
</script>

<style lang="scss" scoped>
	.card{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 5px;
		/deep/ .card-item{
			box-sizing: border-box;
			width: 50%;
			padding: 8px 5px;
			.picture{
				position: relative;
				height: 97.05px;
				>img{
					width: 100%;
					height: 97.05px;
					object-fit: cover;
				}
				.count{
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					color: #fff;
					font-size: 12px;
					padding: 5px 6px;
					>span{
						line-height: 16px;
						i{
							font-size: 14px;
							vertical-align: -2px;
						}
					}
					.fl{
						float: left;
					}
					.fr{
						float: right;
					}
				}
			}
			.title{
				font-size: 12px;
				margin-top: 6px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>